<template>
    <div>
        <el-card class="box-card">
            <!-- 头部区域 -->
            <template #header>
                <div class="header">
                    <span>课程成绩</span>
                </div>
            </template>
            <!-- 搜索表单 -->
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="课程：">
                    <el-select v-model="Search.courseid" placeholder="请选择课程" prop="coursename">
                        <el-option v-for="c in course" :key="c.id" :label="c.courseName" :value="c.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="getGrade">查询</el-button>
                    <el-button type="primary" icon="el-icon-refresh" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
            <!-- 课程成绩列表 -->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column label="课程" width="150" prop="coursename">
                </el-table-column>
                <el-table-column label="出勤" width="150" prop="attendNum">
                </el-table-column>
                <el-table-column label="课堂任务" width="150" prop="classtaskNum">
                </el-table-column>
                <el-table-column label="课后任务" width="150" prop="aftertaskNum">
                </el-table-column>
                <el-table-column label="实验报告" width="150" prop="experimentNum">
                </el-table-column>
                <el-table-column label="平时分" width="150" prop="usualscoreNum">
                </el-table-column>
                <el-table-column label="期末分数" width="150" prop="finalscoreNum">
                </el-table-column>
                <el-table-column label="课程总分" width="150" prop="totalNum">
                </el-table-column>
                <template #empty>
                    <el-empty description="没有数据" />
                </template>
            </el-table>
            <!-- 分页条 -->
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="this.pageNum" :page-sizes="[3, 5, 10]" :page-size=this.pageSize
                    layout="total, sizes, prev, pager, next, jumper" :total=this.total>
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import request from '@/utils/request'
export default {
    data() {
        return {
            Search: {
                courseid: ''
            },
            course: {

            },
            tableData: [],
            pageNum: 1,
            pageSize: 5,
            total: 10,
            stuid: localStorage.getItem("stuid")
        }
    },
    methods: {
        reset() {
            this.Search.courseid = ''
        },
        //获取课程成绩
        getGrade() {
            request.get("/grade/stuFind", {
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    stuid: localStorage.getItem("stuid")?localStorage.getItem("stuid"):0,
                    courseid: this.Search.courseid
                }
            }).then(res => {
                if (res.data.code == '0') {
                    console.log(res.data.data)
                    this.tableData = res.data.data.list
                    this.total = res.data.data.total
                } else {
                    this.$message.error("获取失败")
                }
            }).catch(error=>{
                console.log(new error("服务异常"))
                this.$message.error("服务异常")
            })
        },
        //学生课程
        getCourse() {
            request.get("course/stuCourse", {
                params: {
                    id: localStorage.getItem("stuid")?localStorage.getItem("stuid"):0
                }
            }).then(res => {
                if (res.data.code == '0') {
                    console.log(res.data.data)
                    this.course = res.data.data
                } else {
                    this.$message.error("获取失败")
                }
            })
        },
        //分页方法
        handleSizeChange(pageSize) {
            this.pageSize = pageSize
            console.log(pageSize)
            this.getGrade()
        },

        handleCurrentChange(pageNum) {
            this.pageNum = pageNum
            this.getGrade()
            console.log(pageNum)
        },
    },
    created() {
        this.getCourse()
        this.getGrade()
    }
}
</script>

<style></style>